<template>
  <view class="patient-record-page">
    <!-- 顶部导航栏 -->
    <view class="top-header">
      <view class="header-left" @click="goBack">
        <image
          class="back-icon"
          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E"
          mode="aspectFit"
        ></image>
        <text>返回</text>
      </view>

      <view class="header-center">
        <text class="page-title">查房记录</text>
      </view>

      <view class="header-right"></view>
    </view>

    <!-- 患者基本信息 -->
    <view class="patient-info-card">
      <view class="card-header">
        <view class="department-tag">
          <text>{{ patientInfo.department }}</text>
        </view>
      </view>

      <view class="info-grid">
        <view class="info-item">
          <text class="info-label">姓名：</text>
          <text class="info-value">{{ patientInfo.name }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">性别：</text>
          <text class="info-value">{{ patientInfo.gender }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">年龄：</text>
          <text class="info-value">{{ patientInfo.age }}岁</text>
        </view>

        <view class="info-item">
          <text class="info-label">住院号：</text>
          <text class="info-value">{{ patientInfo.admissionNo }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">主管医生：</text>
          <text class="info-value">{{ patientInfo.doctor }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">床号：</text>
          <text class="info-value">{{ patientInfo.bedNo }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">诊断：</text>
          <text class="info-value">{{ patientInfo.diagnosis }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">主管护士：</text>
          <text class="info-value">{{ patientInfo.nurse }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">入院时间：</text>
          <text class="info-value">{{ patientInfo.admissionTime }}</text>
        </view>
      </view>
    </view>

    <!-- 查房描述 -->
    <view class="record-section">
      <view class="section-title">
        <text>查房描述</text>
      </view>

      <view class="textarea-wrapper">
        <textarea
          v-model="recordContent"
          placeholder="点此输入..."
          :maxlength="500"
          :auto-height="true"
        ></textarea>
        <view class="char-count">
          <text>{{ recordContent.length }}/500</text>
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="save-button" @click="saveRecord">
      <text>保存</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      patientInfo: {
        department: "",
        name: "",
        gender: "",
        age: 0,
        admissionNo: "",
        doctor: "",
        bedNo: "",
        diagnosis: "",
        nurse: "",
        admissionTime: "",
      },
      recordContent: "",
    };
  },
  onLoad(options) {
    // 获取传递的患者信息
    if (options.patientData) {
      this.patientInfo = JSON.parse(decodeURIComponent(options.patientData));

      // 加载之前保存的查房记录
      this.loadRecord();
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    loadRecord() {
      // 从本地存储中加载查房记录
      const recordKey = `patient_record_${this.patientInfo.admissionNo}`;
      const savedRecord = uni.getStorageSync(recordKey);

      if (savedRecord) {
        this.recordContent = savedRecord.content || "";

        // 显示加载成功提示
        uni.showToast({
          title: "已加载之前的记录",
          icon: "none",
          duration: 1500,
        });
      }
    },
    saveRecord() {
      if (!this.recordContent.trim()) {
        uni.showToast({
          title: "请输入查房描述",
          icon: "none",
        });
        return;
      }

      uni.showModal({
        title: "提示",
        content: "确定要保存查房记录吗？",
        success: (res) => {
          if (res.confirm) {
            // 保存到本地存储
            const recordKey = `patient_record_${this.patientInfo.admissionNo}`;
            const recordData = {
              content: this.recordContent,
              patientInfo: this.patientInfo,
              saveTime: new Date().toLocaleString("zh-CN", {
                year: "numeric",
                month: "2-digit",
                day: "2-digit",
                hour: "2-digit",
                minute: "2-digit",
                second: "2-digit",
              }),
            };

            uni.setStorageSync(recordKey, recordData);

            uni.showToast({
              title: "保存成功",
              icon: "success",
              duration: 2000,
            });

            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.patient-record-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;

  // 顶部导航栏
  .top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    z-index: 999;

    .header-left {
      display: flex;
      align-items: center;

      .back-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 12rpx;
      }

      text {
        font-size: 28rpx;
        color: #ffffff;
      }
    }

    .header-center {
      flex: 1;
      text-align: center;

      .page-title {
        font-size: 36rpx;
        color: #ffffff;
        font-weight: bold;
      }
    }

    .header-right {
      width: 80rpx;
    }
  }

  // 患者信息卡片
  .patient-info-card {
    margin-top: 140rpx;
    margin: 140rpx 40rpx 30rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

    .card-header {
      margin-bottom: 30rpx;

      .department-tag {
        background: #10b981;
        color: #ffffff;
        padding: 8rpx 24rpx;
        border-radius: 8rpx;
        display: inline-block;

        text {
          font-size: 26rpx;
        }
      }
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24rpx 20rpx;

      .info-item {
        display: flex;
        // flex-direction: column;

        .info-label {
          font-size: 24rpx;
          color: #999999;
          margin-bottom: 8rpx;
          margin-right: 10px;
        }

        .info-value {
          font-size: 28rpx;
          color: #333333;
          font-weight: 500;
        }
      }
    }
  }

  // 查房描述区域
  .record-section {
    margin: 0 40rpx 30rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

    .section-title {
      margin-bottom: 20rpx;

      text {
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
      }
    }

    .textarea-wrapper {
      position: relative;

      textarea {
        width: 100%;
        min-height: 400rpx;
        background: #f5f7fa;
        border-radius: 12rpx;
        padding: 24rpx;
        font-size: 28rpx;
        color: #333333;
        line-height: 1.6;
        box-sizing: border-box;
      }

      .char-count {
        position: absolute;
        bottom: 16rpx;
        right: 24rpx;

        text {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }

  // 保存按钮
  .save-button {
    width: 670rpx;
    height: 88rpx;
    background: linear-gradient(to right, #10b981, #059669);
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60rpx auto 40rpx;
    box-shadow: 0 8rpx 16rpx rgba(16, 185, 129, 0.3);

    text {
      font-size: 32rpx;
      color: #ffffff;
      font-weight: bold;
    }

    &:active {
      opacity: 0.9;
      transform: translateY(2rpx);
    }
  }

  // 底部导航栏
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: #ffffff;
    border-top: 1rpx solid #e5e7eb;
    display: flex;
    align-items: center;
    z-index: 998;

    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .nav-icon {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 8rpx;
      }

      text {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}
</style>
